<template>
	<view :style="{'--color':color}">
		<status-bar :title='type == 1 ? "新增地址" : "编辑地址"'></status-bar>


		<!-- <view class="row a-center bgwhite padding20 bor_radius_10 m-top20" @click="chooseAddress" v-if="type == 1">
			<view class="iconfont icon-weixin color_wechat size42"></view>
			<text class="black size26 m-left20">获取微信收货地址</text>
			<view class="iconfont icon-a-zujian7 h6 color_99 j-self-end"></view>
		</view> -->

		<view class="row bgwhite bor_radius_10 p-left20 p-right20 m-top20">
			<view class="list bot">
				<text class="title_name">收货人</text>
				<input type="text" class="flex-1 height color_33 size26" v-model="Aname" placeholder="收货人姓名"
					placeholder-class="place">
			</view>
			<view class="list bot">
				<text class="title_name">手机号码</text>
				<input type="number" class="flex-1 height color_33 size26" v-model="Amobile" placeholder="收货人手机号"
					placeholder-class="place">
			</view>
			<view class="list bot">
				<text class="title_name">所在地区</text>
				<picker mode="region" :value="region" @change="changeCity" class="flex-1 city">
					<view class="row a-center cityPick">
						<input type="text" disabled class="flex-1 height color_33 size26" v-model="Aregion"
							placeholder="省/市/区" placeholder-class="place">
						<view class="iconfont icon-a-zujian7 color_99 size26"></view>
					</view>
				</picker>
			</view>
			<view class="rows p-top24 p-bot24 bot">
				<view class="listText">
					<text class="title_name">详细地址</text>
					<textarea class="flex-1 color_33 size26 textarea" disable-default-padding :maxlength="-1"
						auto-height v-model.trim="Aaddress" placeholder="请填写详细地址" placeholder-class="place"></textarea>
					<view class="d-flex a-center color_99 p-left20 p-bot20 p-top20" @click="chooseLocation"
						v-if="position.longitude">
						<view class="iconfont icon-a-zu1418 h6"></view>
						<text class="h6 m-left4">定位</text>
					</view>

				</view>
			</view>

		</view>


		<view class="row j-sb a-center bgwhite padding20 bor_radius_10 m-top20">
			<text class="black size26">设为默认收货地址</text>
			<u-switch v-model="checked" :activeColor="color" @change="switchChange"></u-switch>
		</view>

		<view class="rows m-top50">
			<view class="botBtn Save flexac white" @click="SaveAddress">保存并使用</view>
			<view class="botBtn bgwhite flexac color_33 delAdd" @click="delAdress" v-if="type == 2">删除收货地址</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'

	export default {
		data() {
			return {
				id: '',
				bid: '',
				recommend: '',
				recommend_Aregion: '',
				Aname: '',
				Amobile: '',
				Aregion: '',
				Aaddress: '',
				doorplate: '',
				type: 2, // 1 新增地址 2 编辑地址
				region: [],
				areaHeights: 40,
				checked: false,
				postionAdd: '',
				province_code: '',
				city_code: '',
				county_code: '',
				town_code: '',
				addressComponent: '',
			}
		},
		async onLoad(option) {

			if (option.type) this.type = option.type;
			this.type == 1 ? this.$BarTitle('新增地址') : this.$BarTitle('编辑地址');
			if (option.bid) this.bid = option.bid;
			if (option.id) {
				this.id = option.id;
				this.obtainAddress(option.id);
			};
			if (this.position.longitude == 0) {
				const result = await this.$pop.getLocation();
			};
			if (this.position.longitude && this.type == 1) this.geocoder(this.position.longitude, this.position
				.latitude);
		},
		onShow() {
			if (this.userInfo) this.Amobile = this.userInfo.phone;
		},
		methods: {
			...mapMutations(['getAddress']),
			geocoder(lon, lat) {
				this.$showLoading('');
				this.$http.get_ds({
					url: '/geocoder',
					data: {
						postStr: {
							lon,
							lat,
							ver: 1
						},
						type: 'geocode',
						tk: this.tdkey
					}
				}).then(res => {
					console.log(res, 'geocoder');
					this.$hideLoading();
					if (res.status != 0) return;
					const result = res.result.addressComponent;
					this.region[0] = result.province;
					this.region[1] = result.city ? result.city : result.province;
					this.region[2] = result.county;
					this.Aregion = `${this.region[0]}/${this.region[1]}/${this.region[2]}`
					this.addressComponent = result

				})
			},
			chooseLocation() {
				let that = this;
				uni.chooseLocation({
					latitude: this.position.latitude,
					longitude: this.position.longitude,
					success: async (res) => {
						console.log(res);
						// const Result = await that.$pop.gcj02towgs84(res.longitude, res.latitude);
						that.geocoder(res.longitude, res.latitude);
						that.disassemble(res);
					},
					fail: (err) => {
						console.log(err);
					}

				})
			},


			disassemble(Data) {
				const areg = Data.address;
				const provinceIndex = areg.indexOf('省');
				const cityIndex = areg.indexOf('市');
				const districtIndex = areg.indexOf('区');
				let address_name = '';

				address_name = areg.substring(districtIndex + 1, areg.length);
				this.Aaddress = address_name + Data.name;
			},




			SaveAddress() {
				if (!this.Aname) return this.$Toast('请输入收货人姓名');
				if (!this.Amobile) return this.$Toast('请输入收货人手机号');
				if (this.Amobile && !this.$reg.phone.test(this.Amobile)) return this.$Toast('手机号输入有误');
				if (!this.Aregion) return this.$Toast('请选择省市区');
				if (!this.Aaddress) return this.$Toast('请填写详细地址');
				this.$showLoading('保存中~');
				this.$http.post({
					url: '/zzj_singleSaleApi/addAdress',
					data: {
						Aname: this.Aname,
						Amobile: this.Amobile,
						Aregion: this.region.join(''),
						Aaddress: this.Aaddress,
						is_default: this.checked,
						id: this.id,
						// addressComponent: JSON.stringify(this.addressComponent),
					}
				}).then(res => {
					this.$hideLoading();
					if (res.code != 100) return this.$Toast(res.msg);
					this.$back();
				})
			},
			changeCity(e) {
				const city = e.detail.value;
				city.forEach((item, index) => {
					this.region[index] = item;
				})
				this.Aregion = `${city[0]}/${city[1]}/${city[2]}`
			},


			switchChange(e) {
				this.checked = e;
			},
			async chooseAddress() {
				const addressResult = await this.$pop.chooseAddress();
				this.addAdress(addressResult);
			},

			addAdress(item) {
				this.$http.post({
					url: '/zzj_singleSaleApi/addAdress',
					data: {
						Aname: item.userName,
						Amobile: item.telNumber,
						Aregion: `${item.provinceName}${item.cityName}${item.countyName}`,
						Aaddress: item.detailInfo,
						is_default: 0
					}
				}).then(res => {
					if (res.code != 100) return this.$Toast(res.msg);
					this.$back();
				})
			},





			obtainAddress() {
				this.$http.post({
					url: '/zzj_singleSaleApi/obtainAddress',
					data: {
						id: this.id,
					}
				}).then(res => {
					if (res.code != 100) return this.$Toast(res.msg, 2);
					const result = res.data;
					this.Aname = result.Aname;
					this.Amobile = result.Amobile;
					this.Aaddress = result.Aaddress;
					this.checked = result.is_default == 0 ? false : true;
					const areg = result.Aregion;
					const provinceIndex = areg.indexOf('省');
					const cityIndex = areg.indexOf('市');
					const districtIndex = areg.indexOf('区');
					if (districtIndex < cityIndex) {
						this.region[0] = areg.substring(0, districtIndex + 1);
						console.log(this.region[0]);
						this.region[1] = areg.substring(districtIndex + 1, cityIndex + 1);
						this.region[2] = areg.substring(cityIndex + 1, areg.length);
					} else if (provinceIndex == -1) {
						let list = areg.split('市');
						this.region[0] = list[0] + '市';
						this.region[1] = list[1] + '市';
						this.region[2] = list[2];
					} else {
						this.region[0] = areg.substring(0, provinceIndex + 1);
						this.region[1] = areg.substring(provinceIndex + 1, cityIndex + 1);
						this.region[2] = areg.substring(cityIndex + 1, areg.length);
					}
					this.Aregion = `${this.region[0]}/${this.region[1]}/${this.region[2]}`;
				})
			},
			delAdress() {
				this.$http.post({
					url: '/zzj_singleSaleApi/delAdress',
					data: {
						id: this.id,
					}
				}).then(res => {
					if (res.code != 100) return this.$Toast(res.msg);
					this.$back();
				})
			}
		},
		onUnload() {
			this.getAddress('')
		},
		computed: {
			...mapState(['color', 'position', 'userInfo', 'resultAdd', 'tdkey']),

		}

	}
</script>
<style>
	page {
		background-color: #f7f9fa;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
	}
</style>
<style lang="scss" scoped>
	.list {
		width: 100%;
		height: 90rpx;
		display: flex;
		align-items: center;
	}

	.listText {
		width: 100%;
		display: flex;
		min-height: 90rpx;
		overflow: hidden;
	}

	.title_name {
		width: 150rpx;
		color: #000;
		font-size: 28rpx;
		color: #949495;
	}

	/deep/.place {
		color: #ccc;
	}

	.city {
		position: relative;
		height: 100%;
		overflow: hidden;
	}

	.cityPick {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 80;
	}

	.textarea {
		min-height: 100rpx;
		padding-top: 6rpx;
		padding-bottom: 10rpx;
		display: block;
	}

	.botBtn {
		width: 690rpx;
		height: 80rpx;
		margin: 30rpx auto 0;
		border-radius: 40rpx;
		font-size: 28rpx;
	}

	.delAdd {
		border: 1rpx solid #f0f1f3;
	}

	.Save {
		background-color: var(--color);
	}
</style>